<template>
  <div
    :style="{ paddingLeft: `${left}px` }"
    :class="{ 'com-global-marked-editor-max': amplification }"
    class="com-global-marked-custom-editor"
  >
    <a-row :gutter="10">
      <a-col span="12" class="input-box">
        <a-input v-model="textareaStr" class="textarea" type="textarea" placeholder="请输入内容" />
      </a-col>
      <a-col span="12">
        <div class="marked-editor-sprsing">
          <w-psrsing :datastr="textareaStr" />
        </div>
      </a-col>
    </a-row>
    <div class="other-icon">
      <template v-if="zoom">
        <a-icon
          v-if="amplification"
          type="fullscreen-exit"
          class="icon w-pointer"
          @click="amplification = false"
        />
        <a-icon v-else type="fullscreen" class="icon w-pointer" @click="amplification = true" />
      </template>
      <a-icon v-if="savebtn" type="save" class="icon w-pointer" @click="saveClick" />
      <up-to-url v-if="imgbtn" />
      <a-dropdown>
        <a-icon class="icon w-pointer" type="question-circle" @click="e => e.preventDefault()"/>
        <a-menu slot="overlay">
          <a-menu-item v-for="(v, k) in markdownInfo.titles" :key="v" @click="dropdownMenuItemClick(k)">
            {{ v }}
          </a-menu-item>
        </a-menu>
      </a-dropdown>
    </div>
    <w-modal
      ref="WModal"
      :footer-hide="true"
      hide-footer
      :title="`Markdown提示(${markdownInfo.titles[markdownInfo.index]})`"
    >
      <p v-for="(v, k) in markdownInfo.codes[markdownInfo.index]" :key="k">{{ v }}</p>
    </w-modal>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";
import WPsrsing from "@/components/global/marked/custom/parsing";
import "@/icons/copy";
import UpToUrl from "@/components/global/imageUp/upToUrl";
import WModal, { ModalComType } from "@/components/global/modal";

@Component({
  name: "ComGlobalMarkedCustomEditor",
  components: {
    WPsrsing,
    UpToUrl,
    WModal,
  },
})
export default class ComGlobalMarkedCustomEditor extends Vue {
  // 距离左侧距离
  @Prop({ type: Number, default: 0 }) left!: number;
  // 是否显示保存按钮
  @Prop({ type: Boolean, default: false }) savebtn!: boolean;
  // 是否显示图片按钮
  @Prop({ type: Boolean, default: false }) imgbtn!: boolean;
  // 是否显示缩放
  @Prop({ type: Boolean, default: false }) zoom!: boolean;

  // 输入的数据
  textareaStr = "";
  // 是否放大
  amplification = false;
  // Markdown 提示
  markdownInfo = {
    index: "0",
    titles: ["图片", "超链接", "表格", "折叠"],
    codes: [
      ["![图片alt](图片地址 ''图片title'')", '<img src="" width = "400"/>'],
      ['[超链接名](超链接地址 "超链接title")'],
      [
        "表头|表头|表头",
        "---|:--:|---:",
        "内容|内容|内容",
        "两边加：表示文字居中",
        "右边加：表示文字居右",
      ],
      ["<details>", "<summary>标题</summary>", "内容!!!", "</details>"],
    ],
  };

  /**
   * 获取数据
   * @returns {string}
   */
  getData() {
    return this.textareaStr;
  }

  /**
   * 设置数据
   * @param data
   */
  setData(data: string) {
    if (!data) {
      return;
    }
    this.textareaStr = data;
  }

  /**
   * 保存按钮点击
   */
  saveClick() {
    this.$emit("save");
  }

  /**
   * Markdown 提示事件
   * @param command
   */
  dropdownMenuItemClick(command: string) {
    this.markdownInfo.index = command;
    (this.$refs.WModal as ModalComType).show()
  }
}
</script>

<style lang="less">
.com-global-marked-custom-editor {
  position: relative;

  .marked-editor-sprsing {
    height: calc(100vh - 80px);
    overflow: auto;
    border: 1px solid #d3d7e1;
    border-radius: 4px;
    background-color: #fff;
  }

  .textarea {
    height: calc(100vh - 80px);
    resize: none;
  }

  .other-icon {
    position: absolute;
    right: 10px;
    top: 10px;
    display: flex;
    flex-direction: column;
    .icon {
      color: #999;
      margin-bottom: 7px;
      font-size: 20px;
    }

    > .icon:hover {
      color: coral;
    }
  }
}

.com-global-marked-editor-max {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1001;
  background-color: #fff;
  padding-left: 0px !important;
  .marked-editor-sprsing {
    height: calc(100vh);
  }

  .textarea {
    height: calc(100vh);
  }
}
</style>
